<template>
  <el-menu-item 
    v-if="!router.children || !router.children.length" :index="router.path" :route="{path: router.path}">
    <span slot="title">{{router.meta.name}}</span>
  </el-menu-item>
 <el-submenu v-else :index="router.path">
    <template slot="title">
      <span>{{router.name}}</span>
    </template>
    <el-menu-item-group>
      <template v-for="item in router.children">
        <menu-item :key="item.path" :router="item"></menu-item>
      </template>
    </el-menu-item-group>
  </el-submenu>
</template>

<script>
  export default {
    name: 'menuItem',
    props: {
      router: {
        type: Object,
        default: () => {}
      }
    }
  }
</script>

<style>
</style>
